<template>
  <view class="friend-profile">
    <image :src="friend.avatar" mode="aspectFill"></image>
    <text>{{ friend.name }}</text>
    <text>{{ friend.email }}</text>
    <text>{{ friend.bio }}</text>
    <text>{{ friend.phone }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      friend: {}
    };
  },
  onLoad(options) {
    // 根据传递过来的ID加载好友详情
    const friendId = options.id;
    this.loadFriendDetail(friendId);
  },
  methods: {
    loadFriendDetail(id) {
      // 这里应该从服务器获取好友详情数据，此处仅作示例使用静态数据
      setTimeout(() => {
        this.friend = {
          id: id,
          name: '张三',
          avatar: '/static/img/header/a.svg',
          email: 'zhangsan@example.com',
          bio: '这是张三的个人简介。',
          phone: '1234567890'
        };
      }, 300);
    }
  }
};
</script>

<style lang="scss" scoped>
.friend-profile {
  padding: 20rpx;
  text-align: center;

  image {
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
    margin-bottom: 20rpx;
  }

  text {
    display: block;
    margin: 10rpx 0;
    font-size: 28rpx;
  }
}
</style>